<script lang="ts">
    import { useDatepickerContext } from "../Datepicker/Datepicker.svelte";
    import { useTimepickerContext } from "./Timepicker.svelte";

    const props = $props();
    const arr: number[] = [];
    for (let i = 0; i < props.max; ) {
        arr.push(i);
        i += props.step || 1;
    }
    const ctx: any = useTimepickerContext();
    const ctx2: any = useDatepickerContext();
    const onClick = (num: number, disabled: boolean) => {
        if (disabled) {
            return;
        }
        ctx && ctx.onSelect(props.type, num, props.name);
        props.onSelectTime?.(props.type, num, props.name);
    };
    let wrap: any;

    $effect(() => {
        const v = ctx?.isVisible();
        const v2 = ctx2?.isVisible();
        if (wrap && (v || v2)) {
            wrap.scrollTop = 26 * (props.value / (props.step || 1));
        }
    });
</script>

<div class="cm-time-picker-cell" bind:this={wrap}>
    <ul>
        {#each arr as num}
            {@const disabled = ctx && ctx.disabledTime && ctx.disabledTime(num, props.type)}
            {@const classList = {
                "cm-time-picker-item": true,
                "cm-time-picker-item-active": props.value === num,
                "cm-time-picker-item-disabled": disabled,
            }}
            <!-- svelte-ignore a11y_click_events_have_key_events -->
            <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
            <li class={classList} onclick={onClick.bind(null, num, disabled)}>
                {num}
            </li>
        {/each}
    </ul>
</div>
